<template>
  <div class="list-content-wrap">
    <mu-circular-progress
      :size="90"
      color="red"
      v-if="loading"
      class="loading"
    />
    <div v-else>
      <list-header :list="playList" :creator="creator"></list-header>
      <music-list :songs="tracks"></music-list>
    </div>
  </div>
</template>

<script lang="ts">
import listHeader from "../../components/listHeader.vue";
import musicList from "../../components/musicList.vue";
import { Vue, Component } from "vue-property-decorator";
import { Route } from "vue-router";
import { CommonIdType } from "@/model/id-or-enum.model";
import { MusicInfo, SongListInfo, UserInfo } from "@/model/music-info.model";
import { APIType } from "@/api";
@Component({
  components: {
    musicList,
    listHeader,
  },
})
export default class PlayListComponent extends Vue {
  id: CommonIdType = "";
  tracks: MusicInfo[] = [];
  playList: SongListInfo = null;
  creator: UserInfo = null;
  loading = true;

  $api: APIType;
  $route: Route;

  public mounted() {
    this.id = this.$route.params.id;
    this.$api.getPlayListDetail(this.id).then((res) => {
      this.playList = res?.playlist;
      this.tracks = res?.playlist.tracks;
      this.creator = res?.playlist.creator;
      this.loading = false;
    });
  }
}
</script>

<style lang="scss" scoped>
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.list-content-wrap {
  font-size: 0.15rem;
}
</style>
